<template>
	<view class="centents">
		<view class="intitle">
			<view class="flabel frequire">请选择宠物类别</view>
		</view>
		<view class="typepet">
			<template v-for="(v,i) in radiolist1">
				<view v-if="v.dictLabel=='喵星人'" class="typeoutbox" :class="{active:selecttype==1}"
					@click="selectActive(1,v)">
					<img v-if="selecttype==1" class="img" src="@/static/images/cat2.png" alt="">
					<img v-else class="img" src="@/static/images/cat1.png" alt="">
					<view class="infoti">喵星人</view>
				</view>
				<view v-else class="typeoutbox" :class="{active:selecttype==2}" @click="selectActive(2,v)">
					<img v-if="selecttype==2" class="img" src="@/static/images/dog2.png" alt="">
					<img v-else class="img" src="@/static/images/dog1.png" alt="">
					<view class="infoti">汪星人</view>
				</view>
			</template>
		</view>
		<view class="boxfrom">
			<view class="fbox">
				<view class="flabel frequire">宠物姓名</view>
				<view class="finput ipr">
					<up-input fontSize="32rpx" maxlength="6" color="#262626"
						:placeholderStyle='{color:"#858585",fontSize:"28rpx"}' placeholder="请输入宠物姓名" border="none"
						v-model="userInfo.name" inputAlign="right"></up-input>
				</view>
			</view>
			<u-line color="#d8d8d8"></u-line>
			<view class="fbox">
				<view class="flabel frequire">出生日期</view>
				<view class="finput" @click="selectdate('dateBirth')">
					<u--input fontSize="32rpx" color="#262626" :placeholderStyle='{color:"#858585"}'
						class="inputtxtright" v-model="userInfo.dateBirth" disabled disabledColor="#ffffff"
						suffixIcon="arrow-right" suffixIconStyle="color: #858585" inputAlign="right"
						placeholder="请选择出生日期" border="none"></u--input>
				</view>
			</view>
			<u-line color="#d8d8d8"></u-line>
			<view class="fbox">
				<view class="flabel frequire">陪伴日期</view>
				<view class="finput" @click="selectdate('dateCompanionship')">
					<!-- <u-form-item @click="selectdate" prop="userInfo.dateBirth" ref="item1"> -->
					<u--input class="inputtxtright" fontSize="32rpx" color="#262626" suffixIcon="arrow-right"
						suffixIconStyle="color: #858585" :placeholderStyle='{color:"#858585"}'
						v-model="userInfo.dateCompanionship" disabled disabledColor="#ffffff" inputAlign="right"
						placeholder="请选择陪伴日期" border="none"></u--input>
					<!-- </u-form-item> -->
				</view>
			</view>
			<u-line color="#d8d8d8"></u-line>
			<view class="fbox">
				<view class="flabel frequire">宠物性别</view>
				<view class="finput typegender">
					<view class="man" :class="{sexactive:userInfo.sex===0}" @click="userInfo.sex=0">
						弟弟
					</view>
					<view class="wman" :class="{sexactive:userInfo.sex==1}" @click="userInfo.sex=1">
						妹妹
					</view>
				</view>
			</view>
			<u-line color="#d8d8d8"></u-line>
			<view class="fbox">
				<view class="flabel frequire">宠物品种</view>
				<view class="finput" @click="selectPick(2,'breed')">
					<!-- <u-form-item @click="selectPick(2)" prop="userInfo.name" ref="item1"> -->
					<u--input v-model="userInfo.breed" fontSize="32rpx" color="#262626" suffixIcon="arrow-right"
						suffixIconStyle="color: #858585" :placeholderStyle='{color:"#858585"}' disabled
						disabledColor="#ffffff" inputAlign="right" placeholder="请选择宠物品种" border="none"></u--input>
					<!-- </u-form-item> -->
				</view>
			</view>
			<u-line color="#d8d8d8"></u-line>
			<view class="fbox">
				<view class="flabel">宠物体重</view>
				<view class="finput" @click="selectPick(1, 'weight')">
					<!-- <u-form-item @click="selectPick(2)" prop="userInfo.name" ref="item1"> -->
					<u--input v-model="userInfo.weight"  fontSize="32rpx" color="#262626" suffixIcon="arrow-right"
						suffixIconStyle="color: #858585" :placeholderStyle='{color:"#858585"}' disabled
						disabledColor="#ffffff" inputAlign="right" placeholder="请选择宠物体重" border="none"></u--input>
					<!-- </u-form-item> -->
				</view>
			</view>
			<u-line color="#d8d8d8"></u-line>
			<view class="fbox">
				<view class="flabel">是否绝育</view>
				<view class="finput typegender">
					<view class="finput typegender">
						<view class="item1" :class="{itemactive:userInfo.sterilization==1}" @click="userInfo.sterilization=1">
							已绝育
						</view>
						<view class="item2" :class="{itemactive:userInfo.sterilization===0}" @click="userInfo.sterilization=0">
							未绝育
						</view>
					</view>
				</view>
			</view>
			<u-line color="#d8d8d8"></u-line>
			<view class="petimg">
				<view class="petimgti">
					<view>宠物照片</view>
					<view>
						{{filelist.length}}/3
					</view>
				</view>
				<view class="uploadbox">
					<u-upload :fileList="filelist" @afterRead="afterRead"  name="6" multiple :maxCount="3" width="70" height="70">
						<view class="uploadstyle">
							<view>
								<view class="icobox">
									<u-icon name="plus" bold class="plusIcon"></u-icon>
								</view>
								<view class="imgtext">上传照片</view>
							</view>
						</view>
					</u-upload>
				</view>
			</view>
		</view>
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<view class="fbtn">
			<up-button type="primary" size="large" color="#DEA89C" :shape="'circle'" text="保存档案"
				@click="petsave"></up-button>
		</view>
		<u-datetime-picker confirmColor='#dea89c' @confirm="selectdateVal" @cancel="showDate=false"
			:minDate="minDate" :maxDate="maxDate" :show="showDate" v-model="radiovalue1"
			mode="date"></u-datetime-picker>
		<u-picker ref="uPicker" confirmColor='#dea89c' :visibleItemCount='5' @confirm="onconfirm"
			@cancel="selectshow=false" :show="selectshow" :columns="columns" :keyName="label"></u-picker>
	</view>
</template>

<script>
	import {
		getpettype,
		getbeed,
		getsex,
		getyn,
		possetpet
	} from '@/pages/api/apihost.js'
	import mixins from "@/pages/mxin/mxin.js"
	export default {
		mixins:[mixins],
		data() {
			return {
				showDate: false,
				selectshow: false,
				selectdtype: '',
				radiovalue1: new Date(),
				selecttype: '',
				label: 'name',
				minDate:new Date(`${new Date().getFullYear()-5}-01-01`).getTime(),
				maxDate:new Date(`${new Date().getFullYear()+2}-12-31`).getTime(),
				columns: [],
				petoptin1: [],
				petoptin2: [],
				radiolist1: [],
				radiolist2: [{
						name: '男'
					},
					{
						name: '女'
					},
				],

				userInfo: {
					name: '', // 名称
					petType: '', //宠物类别
					dateBirth: '',
					dateCompanionship: '', // 陪伴日期，
					sex: '',
					weight: '',
					sterilization: '', // 是否绝育
					breed: '',
					breedname:'',
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				radio: '',
				switchVal: false
			};
		},
		mounted() {
			this.getptype()
		},
		methods: {
			selechange(e){
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
			},
			onconfirm(v) {
				let {
					indexs,
					value,
				} = v
				let selectval=indexs[0]
				this.userInfo[this.selectdtype]=value[0].dictLabel
			

				this.selectshow = false
			},
			getptype() {
				getpettype().then(r => {
					this.radiolist1 = r
				})
				getbeed().then(r => {
					this.petoptin2 = []
					this.label = 'dictLabel'
					this.petoptin2 = r
				})
				let arr=[]
				this.petoptin1=[]
				 for (let index = 1; index < 50; index++) {
				      arr.push({
				      	dictLabel:`${index}kg`,
						label:`${index}kg`,
						id:index
				      })
				    }
					this.petoptin1=arr
				
			},
			selectActive(v) {
				this.selecttype = v
				this.userInfo.petType=v
			},
			selectdate(e) {
				this.selectdtype = e
				if(this.userInfo.dateBirth ){
					this.radiovalue1=new Date(this.userInfo.dateBirth)
				} else if(this.userInfo.dateCompanionship){
					this.radiovalue1=new Date(this.userInfo.dateCompanionship)
				} else{
					this.radiovalue1=new Date()
				}
				if(e=='dateCompanionship'){
					
					this.maxDate=new Date(`${new Date().getFullYear()+2}-12-31`).getTime()
				} else{
					this.maxDate=new Date().getTime()
				}
				this.showDate = true
			},
			selectdateVal(v) {
				let t = new Date(v.value)
				let y = t.getFullYear()
				let M = t.getMonth() + 1
				let d = t.getDate()
				M > 9 ? M = M : M = `0${M}`
				d > 9 ? d = d : d = `0${d}`
				let end = `${y}-${M}-${d}`
				this.userInfo[this.selectdtype] = end
				this.showDate = false
				
			},
			selectPick(v, type) {
				this.selectdtype = type
				this.columns = []
				this.columns.push(this[`petoptin${v}`])
				this.selectshow = true
			},
			petsave() {
				
				// 对参数校验
				let {breed,name,dateBirth,dateCompanionship,sex,petType}=this.userInfo
				if(breed&&name&&dateBirth&&dateCompanionship&&sex!==''&&petType!==''){
					let params=this.userInfo
				    let url=[]
					let flag=false
					this.filelist.forEach(v=>{
						console.log(v.url, 'viote')
						if(v.status!='success'){
							uni.$u.toast('请确认图片是否上传')
							flag=true
							return
						}
						url.push(v.url)
						
					})
					params.image=url.join(',')
					if(flag){
						return
					}
					possetpet(params).then(r=>{
						uni.$u.toast('保存成功')
						uni.navigateBack()
					})
				} else{
					uni.$u.toast('信息不完整,红色星号的为必填项')
				}
				// this.$refs.uForm.validate().then(res => {
				// 	console.log(res, 'res--')
				// 	uni.$u.toast('校验通过')
				// }).catch(errors => {
				// 	uni.$u.toast('校验失败')
				// })

			},
		},
	};
</script>
<style lang="scss" scoped>
	.icobox {
		display: flex;
		justify-content: center;
	}

	.typegender {
		display: flex;
		justify-self: right;

		.man,
		.wman {
			padding: 10rpx 30rpx 10rpx 60rpx;
			color: #858585;
			font-size: 28rpx;
		}

		.item1,
		.item2 {
			padding: 10rpx 30rpx 10rpx 30rpx;
			color: #858585;
			font-size: 28rpx;
		}

		.item2 {
			margin-left: 30rpx;
		}

		.man {
			background-image: url('@/static/images/dd.png');
			background-repeat: no-repeat;
			background-size: 23rpx 23rpx;
			background-position: 29rpx 19rpx;
		}

		.wman {
			background-image: url('@/static/images/mm.png');
			background-repeat: no-repeat;
			background-size: 14rpx 26rpx;
			background-position: 29rpx 15rpx;
		}

		.sexactive {
			border: 1rpx solid rgba(222, 168, 156, 1);
			border-radius: 30rpx;
			color: #DEA89C;
			// background: #F7ECE5;
		}

		.itemactive {
			border: 1rpx solid rgba(222, 168, 156, 1);
			border-radius: 30rpx;
			color: #DEA89C;
		}

	}

	.frequire {
		position: relative;
	}

	.flabel {
		padding-left: 15rpx;
		color: #858585;
	}

	.frequire::after {
		position: absolute;
		top: 5rpx;
		left: -5rpx;
		content: "*";
		display: block;
		color: red;
	}

	.boxfrom {
		padding-top: 30rpx;
	}

	.fbox {
		display: grid;
		grid-template-columns: 160rpx auto;
		height: 110rpx;
		align-items: center;
		// border-bottom: 0.5rpx solid ;

		.flabel {
			font-size: 32rpx;
			color: #858585;
		}
	}

	.typepet {
		padding-top: 30rpx;
		display: flex;

		.typeoutbox:first-child {
			margin-right: 24rpx;
		}

		.typeoutbox {
			background: #F8F8F8;
			border-radius: 24px;
			padding: 58rpx 72rpx;

			.img {
				width: 83rpx;
				height: 62rpx;
			}

			.infoti {
				font-family: PingFangSC-Medium;
				font-size: 32rpx;
				color: #333333;
				letter-spacing: 0;
				line-height: 32rpx;
				font-weight: 500;
				padding-top: 34rpx;
			}
		}

		.active {
			background: #F7ECE5;

			.infoti {
				color: #DEA89C;
			}
		}
	}

	.intitle {
		padding-top: 60rpx;
		font-family: PingFangSC-Semibold;
		font-size: 32rpx;
		color: #333333;
		padding-left: 10rpx;
		letter-spacing: 0;
		line-height: 40rpx;
		font-weight: 600;
	}

	// end
	.inputtxtright {
		text-align: right;
	}

	.centents {
		padding: 24rpx;
		background: #fff;
	}

	.setradio {
		display: flex;
		align-items: center;
	}

	.fbtn {
		padding-top: 78rpx;
		padding-bottom: 60rpx;
	}

	.radioleft {
		padding-right: 16rpx;
	}

	.centents .u-form-item__body {
		height: 90rpx !important;
	}

	.petimgti {
		display: flex;
		justify-content: space-between;
		padding-top: 45rpx;
		color: #858585;
		font-size: 32rpx;
	}

	.uploadstyle {
		border: 1px solid rgba(216, 216, 216, 1);
		border-radius: 16rpx;
		width: 150rpx;
		height: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #858585;
		font-size: 24rpx;

		.plusIcon {
			display: flex;
			justify-content: center;
			font-weight: bolder;
			text-align: center;
		}

		.imgtext {
			padding-top: 16rpx;
		}
	}

	.uploadbox {
		padding-top: 23rpx;
	}

	.ipr {
		padding-right: 10rpx;
	}
</style>